<template>
  <div>
    <el-dialog
      class="dia_box"
      :visible.sync="dialogInformation"
      width="760px"
      height='524px'
      :lock-scroll="true"
      :close-on-press-escape="true"
    >
      <template slot="title">
        <div class="LogisticsHeader">
          <p class="LogisticsHeader_p1">运单号：YT44999644521555</p>
          <p class="LogisticsHeader_p2">物流公司：圆通物流</p>
          <p class="LogisticsHeader_p3">客服电话：95554</p>
        </div>
      </template>

      <div class="Logistics">
        <div class="LogisticsContent">
          <span class="head1">运输中</span>

          <ul class="ul_lists">
            <li
              class="lists "
              :class="index==0?lists_isActive:''"
              v-for="(item ,index) in LogisticsInformation"
              :key="index"
            >
              <div class="lists_child_1">
                <span class="lists_child_2">{{item.LogisticsTime}}</span>
                <span class="lists_child_3">{{item.week}}</span>
              </div>
              <ul class="lists_content_Box">
                <li
                  v-for="( child , inde) in item.content"
                  :key="inde"
                  :class="inde !=0?lists_isActive_none:''"
                ><span class="lists_child_4" :class="item.lenght-1==inde?information_line_none:''" >{{child.nodeTime}}</span> <span class="lists_child_5"> {{child.message}}</span>
                  <div class="information_line"  ></div>
                </li>
                 
              </ul>

            </li>
<div class="information_line_none"></div>
          </ul>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  mounted () {
 
  },
  data() {
    return {
      dialogInformation:false,
      lists_isActive: "lists_isActive",
      lists_isActive_none: "lists_isActive_none",
      lastMessage:'',
      information_line_none:'information_line_none',
      LogisticsInformation: [
        {
          LogisticsTime: "2020-05-06",
          week: "周三",
          content: [
            {
              nodeTime: "14:32:09",
              message: "商品准备派件"
            },
            {
              nodeTime: "10:32:09",
              message: "打印吧单据"
            }
          ]
        },
        {
          LogisticsTime: "2020-05-06",
          week: "周三",
          content: [
            {
              nodeTime: "14:32:09",
              message: "商品准备派件"
            },
            {
              nodeTime: "10:32:09",
              message: "打印吧单据"
            }
          ]
        },
        {
          LogisticsTime: "2020-05-06",
          week: "周三",
          content: [
            {
              nodeTime: "14:32:09",
              message: "商品准备派件"
            },
            {
              nodeTime: "10:32:09",
              message: "打印吧单据"
            }
          ]
        },
      
      ]
    };
  },
  props: {},
  created() {
    this.$on("isshow", data => {
      console.log(data); //{show:true}
    });
  },
  methods: {
    
  }
};
</script>

<style  scoped>
.Logistics {
  background: rgba(255, 255, 255, 1);
  border-radius: 2px;
  margin: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(45, 55, 62, 1);
  line-height: 20px;
  position: relative;
}

/* 头部 */
.LogisticsHeader {
  width: 100%;
  height: 60px;
  display: flex;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(45, 55, 62, 1);
}
.LogisticsHeader p {
  line-height: 32px;
  color: #2d373e;
}
.LogisticsHeader_p1 {
  width: 260px;
  font-weight: 500;
  color: rgba(45, 55, 62, 1);
}
.LogisticsHeader_p2 {
  width: 186px;
}

/* 内容部分 */
.LogisticsContent {
  height: 463px;
  padding: 20px 0 0 20px;
}
.head1 {
  width: 48px;
  height: 22px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 94, 41, 1);
}
.ul_lists {
  margin: 20px 0 0 20px;
}
.lists {
  position: relative;
  padding-left: 20px;

  color: #989fad;
}
.lists_isActive {
  color: rgba(255, 94, 41, 1) !important;
}
.lists_isActive .lists_child_4::before{
   background: rgba(255, 94, 41, 1);
}
.lists_isActive_none {
  color: #989fad !important;
  background: #ffffff!important ;
}
.lists_isActive_none .lists_child_4::before{
   background: rgba(216, 216, 216, 1);
}
.lists_child_4::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 100%;
  background: rgba(216, 216, 216, 1);
  display: inline-block;
  position: relative;
  left: -185px;
}

.lists_siActive::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 100%;
  background: rgba(255, 94, 41, 1);

  display: inline-block;
  position: relative;
  left: -185px;
}

.lists_child_1 {
  float: left;
}
.lists span {
  display: inline-block;
  line-height: 20px;
}
.lists_child_2 {
  width: 108px;
}
.lists_child_3 {
  width: 48px;
}
.lists_child_4 {
  width: 96px;
}
.information_line {
  height: 23px;
  width: 1px;
  background: rgba(216, 216, 216, 1);
  position: relative;
  left: -181px;
}
.information_line_none{
  width: 100%; 
  height: 23px;
  background: #ffffff;;
  display: inline-block;
  position: relative;
  top: -23px;
  left: -10px;
}
.lists_child_5 {
  width: 284px;
  display: inline-block;
}

.lists_content li {
  display: inline-block;
}
.lists_content_Box {
  float: left;
  width: 400px;
}
</style>